<template>
    <div class="detail">
        <div class="img">
            <img :src="item&& item.img1" alt="">
            <van-icon @click="$router.go(-1)" name="arrow-left" />
        </div>
        <div class="text">
            <div class="textbox">
                <div class="texttop">
                    <p class="p1">{{ (item && item.desc)}}</p>
                    <div class="shou" @click="shoucang()">
                        <van-icon v-if="start" name="star-o" :class="{ active: start==true }" />
                        <van-icon v-else name="star-o"  />
                        <span>关注</span>
                    </div>
                </div>
                <p class="p2">{{ item&&item.proname }}</p>
            </div>
        </div>

        <div class="bottom">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" dot />
                <van-goods-action-icon icon="cart-o" text="购物车"  />
                <van-goods-action-icon icon="shop-o" text="店铺"  />
                <van-goods-action-button @click="addCart()" type="warning" text="加入购物车" />
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { DetailData } from '@/api/index.js'
import { Toast } from 'vant';
import { AddCart } from "@/api/index.js"
Vue.use(Toast);
export default {
    data() {
        return {
            proid: this.$route.query.id,
            item: null,
            start:false
        }
    },
    mounted() {
        var bool = false
        this.$store.state.focusData.forEach((item, index) => {
            if (item.proid == this.proid) {
              return  bool = true;
            }
        })
        if (bool) {
            this.start = true
        } else {
            this.start = false
        }
        //详情页请求    DetailData
        DetailData(this.proid).then((ok) => {
            // console.log(ok.data.data)
            this.item = ok.data.data
            Toast('详情页数据');
            // console.log(this.item);
        })
        console.log(this.$store.state.focusData)
    },
    methods: {
        shoucang() {
            if (this.start) {
                //取消
                this.start = false
                this.$store.commit('CancelData',this.item)
            } else {
                //添加
                this.start = true
                this.$store.commit('Shopfocus', this.item)
                Toast('收藏成功');
            }
        },
        //加入购物车
        addCart() {
            // console.log(11)
            var userid = sessionStorage.getItem('userid')
            var token =sessionStorage.getItem('token')
            // console.log(userid)
            if (token) {
                 AddCart(userid, this.item.proid,1).then((ok) => {
                console.log(ok.data.message)
                Toast(ok.data.message);
                })
            } else {
                Toast('请先登录')
            }
        }
        
    },
}
</script>

<style lang="scss" scoped>
.detail{
    width: 100%;
    .img{
        position: relative;
        .van-icon{
            color: white;
            font-size: 0.16rem;
            line-height: 0.32rem;
            text-align: center;
            position: absolute;
            left: 0.3rem;
            top: 0.3rem;
            background-color: #1f2426;
            border-radius: 50%;
            width: 0.32rem;
            height: 0.32rem;
            opacity: .3;
        }
        img{
            width: 3.75rem;
            height: 3.75rem;
        }
    }
    .text{
        width: 100%;
        .textbox{
            width: 95%;
            margin: 2.5%;
            font-size: 0.16rem;
            color: #222222;
            .texttop{
                display: flex;
                justify-content: space-between;
                .p1{
                    width: 3.159rem;
                    color:black ;
                    font-weight: bolder;
                }
                .shou{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .active{
                        color: rgb(226, 103, 103);
                    }
                }
            }
        }
    }
    .bottom {
        margin-top: 0.5rem;
    }
}
</style>